<template>
  <div id="ident-content">
    <div class="container-fluid">
      <div class="row Rd-orderGuide">
        <div class="container">
          <div class="hold30"></div>
          <div class="row col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
            <img src="/static/img/orderGuide-02.svg" alt="">
          </div>
          <div class="hold20 hidden-xs"></div>
          <div class="hold30"></div>
        </div>
      </div>
      <div class="row Rd-orderId">
        <div class="container">订单编号：
          <span class="text-primary">ET20161013160625353629</span>
        </div>
        <div class="hold30"></div>
      </div>
      <div class="row Rd-formDefault Rd-identCaption">
        <div class="container">
          <div class="Rd-cont">
            <div class="hold20"></div>
            <ul>
              <li>按照外管局备案要求，我们需要您上传留学缴费证明。</li>
              <li>例如：学生账户里 <span class="text-primary">缴费金额的截图（推荐）、录取通知书截图、美国 I20 表格</span>。</li>
              <li>上传图片或PDF文件均可，要求字迹清晰可辨认，<span class="text-primary">必须包含 学校名称、学生英文名、缴费金额</span>。</li>
              <li>如果您找不到证明材料，请联系我们 400-885-9993。</li>
            </ul>
            <div class="hold10"></div>
          </div>
        </div>
      </div>
      <div class="row hold50 Rd-holdWhite"></div>
      <div class="row Rd-formDefault Rd-identUpImg">
        <div class="container">
          <div class="Rd-cont">
            <div class="hold10"></div>
            <h2><i class="et_iconfont">&#xe64a;</i>&nbsp;上传付款证明</h2>
            <hr>
            <div class="hold20"></div>
            <div class="row">
              <div class="col-sm-6 Rd-picFlat Rd-exp">
                <div class="Rd-tit">示例文件（点击图片查看）
                </div>
                <div class="Rd-cont clearfix">
                  <!-- <img src="../../../../dist/static/img/about/aboutMe-02.jpg">
                  <p data-src="et3/img/exp/offer.jpg"></p>
                  <p data-src="et3/img/exp/ucla_1.jpg"></p> -->
                  <a href="javascript:;" class="Rd-imgBox" v-for="(item,index) in sampleImage" :key="item.name" @click="prevewImg(item,index,sampleImage)">
                    <img :src="item.url"  style="width: 100%; height: auto;max-width:100%;max-height:100%;">
                  </a>
                </div>
                <div class="hold30"></div>
              </div>
              <div class="col-sm-6 Rd-picFlat">
                <ul class="nav nav-tabs Rd-upWay" role="tablist">
                  <li @click="tabChange(0)" role="presentation" :class="{'active':firstOn,'hidden-xs':!firstOn}" class="tab" data-val="local"><a href="javascript:;"><strong>本地上传</strong></a></li>
                  <li @click="tabChange(1)" role="presentation" :class="{'active':!firstOn,'hidden-xs':firstOn}" class="tab" data-val="wechat"><a href="javascript:;"><strong>微信上传</strong></a></li>
                </ul>
                <div class="Rd-upWay-Page Rd-localPage" :hidden="!firstOn">
                  <div class="hold10"></div>
                  <form>
                    <fieldset class="form-group">
                      <div class="input-group Rd-upFile1 inputFile">
	                      		<!-- <span class="input-group-btn">
		                          <a href="javascript:;" class="btn btn-info" role="button"><i class="et_iconfont">&#xe668;</i>&nbsp;选择文件<input type="file" accept="application/pdf,image/jpeg,image/png" id="file_upFile1"></a>
		                       </span> -->
		                       	<input ref="fileItem" type=file name=j style="display: none;" @change="onchangeImgList" onchange="ye.value=value">
		                       	
		                       	<span class="input-group-btn" style="border: 1px solid #eeeeee;background:#29aae1;border-radius:5px ;">
			                       	<a href="javascript:;" class="btn" role="button"><i class="et_iconfont" style="color: #fff;">&#xe668;</i><input type=button value="选择文件" onclick=j.click() style="background:#29aae1;color: #fff;"></a>
	                        	</span>
	                        	<input class="form-control hidden-xs" name=ye style="color: #555555;background: #eeeeee;border: 1px solid #cccccc;padding: 7px; height: 35px;" placeholder="PDF / jpg / png，小于2MB" readonly> 
	                        	<!-- <input type="file" class="form-control hidden-xs" placeholder="PDF / jpg / png，小于2MB" readonly>           -->
                        <!-- <span class="input-group-btn hidden"><button type="button" class="btn btn-primary" disabled>上传</button></span> -->
                      </div>
                      <p id="cost-error" class="form_error_info text-danger bg-danger Rd-uploadErr" hidden>文件格式不正确</p>
                    </fieldset>
                  </form>
                  <div class="clearfix"></div>
                  <div ref="dragImg" class="Rd-dropFile1 hidden-xs" id="Rd-drop1"><i class="et_iconfont">&#xe668;</i>&nbsp;可以将文件拖放到这里</div>
                  <div class="Rd-dropFile1 hidden-xs disabled hidden"><i class="et_iconfont">&#xe61d;</i>&nbsp;上传文件数量已达到最大</div>
                </div>
                <div class="Rd-upWay-Page Rd-wechatPage" :hidden="firstOn">
                  <p>手机 <span class="label label-success">微信扫码</span> 上传</p>
                  <div class="Rd-qr"><img src="../../../../static/img/wx.png" alt="手机[微信扫码]上传"></div>
                </div>
                <div class="hold30"></div>
              </div>
              <div class="col-sm-12 Rd-picFlat Rd-upd">
                <div class="Rd-tit">上传成功的文件（<var class="Rd-num">0</var>/<var class="Rd-max">0</var>）
                  <button type="button" class="btn btn-primary btn-sm Rd-refresh">　刷 新　</button>
                </div>
                <div class="Rd-cont clearfix" >
                  <a href="javascript:;" class="Rd-imgBox" v-for="(item,index) in fileList2" :key="item.name" @click="prevewImg(item,index,fileList2,true)">
                    <img :src="item.url" style="width: 100%; height: auto;max-width:100%;max-height:100%;">
                  </a>
                </div>
                <div class="hold30"></div>
              </div>
            </div>
            <div class="row">
              <div class="hold20 hidden-xs"></div>
              <div class="col-sm-6">
                <a href="#" class="btn btn-primary btn-lg" id="reg_next1" disabled>&nbsp;下一步&nbsp;</a>
              </div>
              <div class="hold2 hidden-xs0"></div>
              <div class="hold30"></div>
              <img src="" id="identPerview">
            </div>
          </div>
        </div>
      </div>
      <div class="row hold50 Rd-holdWhite"></div>
      <div class="row hold50 Rd-holdWhite"></div>
    </div>
    <div class="modal fade modal-ident-preview" :class="{'show':previewShow,'in':previewShow}" role="dialog" :aria-hidden="!previewShow" data-backdrop="static">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" @click="close">关闭</button>
            <h4 class="modal-title">文件预览</h4>
          </div>
          <div class="modal-body">
            <div class="Rd-info warning"><i class="et_iconfont">&#xe629;</i>必须包含<span class="text-primary"> 缴费金额、录取通知书  </span>的截图页面，可上传多张截图，包含必要信息即可。</div>
            <ul class="pager">
              <li class="previous" :class="{'disabled':previewImgIndex===0}" @click="previous"><a href="javascript:;">&larr;<span class="hidden-xs"> 上一张</span></a></li>
              <!-- <li class="upload Rd-upload" hidden><a href="javascript:;">&nbsp;<span><i class="et_iconfont">&#xe64a;</i>&nbsp;上传文件</span>&nbsp;</a></li> -->
              <li @click="removeImg" class="delFile Rd-delFile" hidden v-if="canRemove"><a href="javascript:;">&nbsp;<i class="et_iconfont">&#xe669;</i>&nbsp;删除文件&nbsp;</a></li>
              <li class="next" :class="{'disabled':previewImgIndex===previewImgArr.length-1}" @click="next"><a href="javascript:;"><span class="hidden-xs">下一张 </span>&rarr;</a></li>
            </ul>
            <img :src="previewImg.url">
            <ul class="pager">
              <li class="previous" :class="{'disabled':previewImgIndex===0}" @click="previous"><a href="javascript:;">&larr;<span class="hidden-xs"> 上一张</span></a></li>
              <!-- <li class="upload Rd-upload" hidden><a href="javascript:;">&nbsp;<span><i class="et_iconfont">&#xe64a;</i>&nbsp;上传文件</span>&nbsp;</a></li> -->
              <li @click="removeImg" class="delFile Rd-delFile" hidden v-if="canRemove"><a href="javascript:;">&nbsp;<i class="et_iconfont">&#xe669;</i>&nbsp;删除文件&nbsp;</a></li>
              <li class="next" :class="{'disabled':previewImgIndex===previewImgArr.length-1}" @click="next"><a href="javascript:;"><span class="hidden-xs">下一张 </span>&rarr;</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div :class="previewShow?'modal-backdrop fade in':''"></div>
  </div>
  
</template>
<script>
import Vue from "vue";
import VueFileUpload from "vue-file-upload";
//Vue.use(Upload);
export default {
  data() {
    return {
      // 控制tab切换
      firstOn: true,
      // 控制model
      previewShow: false,
      //madel删除按钮显示隐藏控制
      canRemove: false,
      // 当前显示图片
      previewImg: {},
      // 当前显示图片索引
      previewImgIndex: -1,
      // 当前显示图片数组
      previewImgArr: [],
      // 示例图片
      sampleImage: [
        {
          name: "food.jpeg",
          url: "https://img.easytransfer.cn/img/main/_temp/identImg/exp/i20.jpg"
        },
        {
          name: "food2.jpeg",
          url:
            "https://img.easytransfer.cn/img/main/_temp/identImg/exp/offer.jpg"
        },
        {
          name: "food3.jpeg",
          url:
            "https://img.easytransfer.cn/img/main/_temp/identImg/exp/ucla_1.jpg"
        }
      ],
      // 上传图片
      fileList2: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://img.easytransfer.cn/img/main/_temp/identImg/exp/ucla_1.jpg"
        }
      ]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    changtip() {
      console.log(1);
      console.log(arguments);
    },
    // 切换tab
    tabChange(i) {
      if (i === 0) {
        if (this.firstOn) {
          return;
        }
        this.firstOn = true;
      } else {
        if (this.firstOn) {
          this.firstOn = false;
        } else {
          return;
        }
      }
    },
    // 预览图片
    prevewImg(item, index, arr, canRemove) {
      if (canRemove) {
        this.canRemove = true;
      } else {
        this.canRemove = false;
      }
      this.previewImg = item;
      this.previewImgIndex = index;
      this.previewImgArr = arr;
      this.previewShow = true;
      document.body.classList.add("modal-open");
    },
    // 关闭预览
    close() {
      this.previewImg = {};
      this.previewImgIndex = -1;
      this.previewImgArr = [];
      this.previewShow = false;
      document.body.classList.remove("modal-open");
    },
    // 前一张
    previous() {
      if (this.previewImgIndex > 0) {
        this.previewImgIndex--;
      }
      this.previewImg = this.previewImgArr[this.previewImgIndex];
    },
    // 下一张
    next() {
      if (this.previewImgIndex < this.previewImgArr.length - 1) {
        this.previewImgIndex++;
      }
      this.previewImg = this.previewImgArr[this.previewImgIndex];
    },
    // 上传文件
    onchangeImgList() {
      let d = this.$refs.fileItem;
      if (d.value) {
        // 有值图片 才实现预览功能
        if (d.files) {
          this.fileList2.push({
            url: this.readerFile(d.files[0]),
            name: d.files[0].name
          });
        }
      }
    },
    // 转换FIle对象
    readerFile(files) {
      let blob = new Blob([files]);
      let url = window.URL.createObjectURL(blob);
      return url;
    },
    // 删除图片
    removeImg() {
      this.fileList2.splice(this.previewImgIndex, 1);

      if (this.previewImgArr.length == 0) {
        this.previewImg = "";
      } else {
        if (this.previewImgIndex > this.previewImgArr.length - 1) {
          this.previewImgIndex = this.previewImgArr.length - 1;
          this.previewImg = this.previewImgArr[this.previewImgIndex];
        }
        this.previewImg = this.previewImgArr[this.previewImgIndex];
      }
    }
  },
  mounted() {
    this.$refs.dragImg.ondragleave = e => {
      e.preventDefault(); //阻止离开时的浏览器默认行为
    };
    this.$refs.dragImg.ondragenter = e => {
      e.preventDefault(); //阻止拖入时的浏览器默认行为
    };
    this.$refs.dragImg.ondragover = e => {
      e.preventDefault(); //阻止拖来拖去的浏览器默认行为
    };
    this.$refs.dragImg.ondrop = e => {
      e.preventDefault();
      e.stopPropagation();
      console.log(555);

      if (e.dataTransfer.files.length) {
        for (let i = 0, len = e.dataTransfer.files.length; i < len; i++) {
          let files = e.dataTransfer.files.item(i);
          console.log(files);
          if (/image/.test(files.type)) {
            this.fileList2.push({
              url: this.readerFile(files),
              name: files.name
            });
          }
        }
      }
    };
  }
};
</script>
<style scoped="scoped">
input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
.form-control {
  margin-top: 1px;
}
.Rd-cont img {
}
.show {
  display: block;
}
</style>